<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card>
            <el-row>
                <el-col>
                    <!-- 添加分类按钮 -->
                    <el-button type="primary" @click="AddClassify">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 树状表格区 -->
            <tree-table class="treetable" :data="goodsList" :columns="columns" show-index index-text="#" :selection-type="false" border :expand-type="false" :show-row-hover="false">
                <!-- 是否有效列模板插槽内容 -->
                <template slot="isOk" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen"></i>
                    <i class="el-icon-error" v-else  style="color:red"></i>
                </template>
                <!-- 排序列模板插槽内容 -->
                <template slot="sort" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level===0" size="mini">标签一</el-tag>
                    <el-tag v-else-if="scope.row.cat_level===1" type="success" size="mini">标签二</el-tag>
                    <el-tag v-else-if="scope.row.cat_level===2" type="warning" size="mini">标签三</el-tag>
                </template>
                <!-- 操作列模板插槽内容 -->
                <template slot="operate">
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </tree-table>

            <!-- 分页区 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="goodsPageParmas.pagenum"
            :page-sizes="[2, 5, 10, 15]"
            :page-size="goodsPageParmas.pagesize"
            layout="total, sizes,prev, pager, next, jumper"
            :total="total" >
             </el-pagination>
        </el-card>

        <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" :visible.sync="AddClassifyDialog" width="30%" @close="CateDialogClose">
            <el-form ref="AddClassifyRef" :model="AddClassifyForm" label-width="80px" :rules="AddClassifyrules" >
            <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="AddClassifyForm.cat_name" ></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
                <!-- 级联选择器 -->
                <!-- v-model 绑定选中的分类ID 是一个数组 -->
                <!-- :options 绑定的数据源 -->
                <!-- props 绑定的选择器的配置对象 -->
                <el-cascader v-model="selectedkeys" :options="ParentCateList"
                :props="cascaderProps" expand-trigger="hover"
                @change="ParentCateChange" clearable change-on-select></el-cascader>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="AddClassifyDialog = false">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data () {
        return {
            goodsList:[],
            goodsPageParmas:{
                type:3,
                // 当前页数
                pagenum:1,
                // 一页多少条
                pagesize:5
            },
            // 总条数数据
            total:0,
            // 树状表格数据
            columns:[{
                label:'分类名称',
                prop:'cat_name'},

                {
                label:'是否有效',
                // 表示当前列定义为模板列
                type: 'template',
                // 模板列的名称
                template: 'isOk',
                },{
                label:'排序',
                // 表示当前列定义为模板列
                type: 'template',
                // 模板列的名称
                template: 'sort',
                },
                {
                label:'操作',
                // 表示当前列定义为模板列
                type: 'template',
                // 模板列的名称
                template: 'operate',
                }],
                // 控制添加分类对话框的显示与隐藏
                AddClassifyDialog:false,
                // 添加分类对话框的表单数据
                AddClassifyForm:{
                    cat_pid:0,
                    cat_name:'',
                    cat_level:0
                },
                // 添加分类对话框的验证规则
                AddClassifyrules:{
                    cat_name:[ { required: true, message: '请输入活动名称', trigger: 'blur' }]
                },
                // 获取父级分类列表
                ParentCateList:[],
                // 配置级联选择器的配置对象
                cascaderProps:{
                     value:'cat_id',
                    // 渲染的选择项分类的名称
                    label:'cat_name',
                    // 父子间嵌套的属性
                    children:'children'
                },
                selectedkeys:[],
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
        // 渲染分类列表
       async getGoodsList(){
           const {data:res}=await this.$http.get('categories',{params:this.goodsPageParmas})
           this.goodsList=res.data.result
           this.total=res.data.total
        },
        // 监听当前页数的变化 pagenum
        handleCurrentChange(newpagenum){
            this.goodsPageParmas.pagenum=newpagenum
            this.getGoodsList()
        },
        // 监听一页多少条的变化 pagesize
        handleSizeChange(newpagesize){
            this.goodsPageParmas.pagesize=newpagesize
            this.getGoodsList()
        },
        // 点击添加分类按钮调用
        AddClassify(){
            this.getParentCateList()
            this.AddClassifyDialog=true
        },
        // 获取添加分类的父级列表
       async getParentCateList(){
          const{data:res} =await this.$http.get('categories',{params:{type:2}})
          if(res.meta.status!==200){return this.$message.error('获取父级列表失败')}
          this.ParentCateList=res.data
        //   console.log(this.ParentCateList);
        //   console.log(res.data);
        //   console.log(this.cascaderProps);
          
          },
        //   父级分类选择器变化调用
        ParentCateChange(){
        // 如果选择器选中的ID数组数大于0
        if(this.selectedkeys.length>0){
            // 把数组中最后一位ID赋值给表单中的ID
            this.AddClassifyForm.cat_pid=
            this.selectedkeys[this.selectedkeys.length-1]
            // 数组中的长度就代表级数 为当前分类的等级赋值
            this.AddClassifyForm.cat_level= this.selectedkeys.length
            return
        }else{
            // 没有选中就为0
            this.AddClassifyForm.cat_pid=0
            // 没有选中就为0
            this.AddClassifyForm.cat_level=0
        }
},  
    // 点击确认按钮调用
       async addCate(){
          const {data:res} =await this.$http.post('categories',this.AddClassifyForm)
          if(res.meta.status!==201){return this.$message.error('添加分类失败')}
          this.$message.success('添加分类成功')
          this.getGoodsList()
          this.AddClassifyDialog=false
        //   console.log(res);
        },
        // 关闭添加分类按钮时调用清空列表
        CateDialogClose(){
            this.$refs.AddClassifyRef.resetFields()
            this.selectedkeys=[]
            this.AddClassifyForm.cat_pid=0
            this.AddClassifyForm.cat_level=0
        }
    }

}
</script>
<style lang="less" scoped>
.treetable{
    margin-top: 15px;
}

</style>